<template>
  <div style="width: 491px">
    <div class="flex calendar-title">
      <a class="el-icon-arrow-left"
         @click="setMonthNum(false)"></a>
      <div @click="getMonthDay">{{ setYear }}年{{ setMonth }}月</div>
      <a class="el-icon-arrow-right"
         @click="setMonthNum(true)"></a>
    </div>
    <ul class="weekdays">
      <li v-for="item in weekDay">{{ item }}</li>
    </ul>
    <ul class="days">
      <li v-for="(item,index) in info"
          :style="index%7===0?border:''"
          @click="handleSetTime(item)"
          style="cursor: pointer"
          :class="item.day===today?'active':'no-active'">
        <div class="flex">
          <span>{{ item.days}} </span>
          <div v-show="showZero||item.num"
               class="num">{{ item.num }}</div>
        </div>
        <div v-show="showZero||item.weight"
             class="info-bg">{{ item.weight }}</div>
      </li>
      <div class="clear"></div>
    </ul>

  </div>
</template>
<script>
function mGetDate(year, month) {
  var d = new Date(year, month, 0)
  return d.getDate()
}

import { getLocalTime } from '@/utils/dateFormat'

export default {
  name: 'calendar',
  props: {
    getData: {
      type: Function,
      require: true
    },
    showZero: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      nowTime: Date.parse(new Date()),
      now: new Date()
        .toLocaleString()
        .split(' ')[0]
        .replace(/\//g, '-'),
      weekDay: ['日', '一', '二', '三', '四', '五', '六'],
      setMonth: new Date().getMonth() + 1,
      setYear: new Date().getFullYear(),
      setDay: new Date().getDate(),
      today: getLocalTime(new Date(), 'YYYY-MM-DD'),
      setWeek: 0,
      info: [],
      calendarDay: [],
      dateType: 'day',
      border: 'border-left:1px solid #ffffff',
      search: '',
      keyWord: '',
      keyWords: [],
      isManyChoice: false,
      isFirst: true
    }
  },
  mounted() {
    this.getMonthDay()
  },
  activated() {
    this.isFirst = true
  },
  methods: {
    getMonthDay() {
      let toMonth = mGetDate(this.setYear, this.setMonth)
      let date = new Date(this.setYear, this.setMonth - 1, this.setDay)
      let today = new Date(this.setYear, this.setMonth - 1, '1')
      this.setWeek = today.getDay()
      this.info = []
      for (let i = 0; i < toMonth; i++) {
        this.info.push({
          day: getLocalTime(
            this.setYear + '/' + this.setMonth + '/' + (i + 1),
            'YYYY-MM-DD'
          ),
          days: i + 1,
          weight: '',
          num: ''
        })
      }
      for (let i = 0; i < this.setWeek; i++) {
        this.info.unshift({
          day: '',
          days: '',
          weight: '',
          num: ''
        })
      }
      this.handleCurrent({ date: getLocalTime(date, 'YYYY-MM-DD') }, true)
      let params = {
        search_EQ_dateType: this.dateType,
        search_GTE_dateTime: getLocalTime(date, 'YYYY-MM-DD')
      }
      // if (this.search) {
      //     if (this.isManyChoice){
      //         if (this.keyWords && this.keyWords.length > 0){
      //             this.keyWord = this.arrayToString(this.keyWords)
      //         } else {
      //             this.keyWord = ""
      //         }
      //     }
      //     params[this.search] = this.keyWord
      // }
      this.getData(this.setYear, this.setMonth).then(res => {
        console.log('天', res.data)
        this.calendarDay = res.data.aaData
        this.info.map((m, i) => {
          this.calendarDay.map((f, index) => {
            if (m.day === f.date) {
              this.info[i].weight = f.weight
              this.info[i].num = f.num
            }
          })
        })
        if (this.isFirst) {
          this.$emit('set-day', { date: this.today })
          this.isFirst = false
        } else {
          if (this.setMonth == new Date().getMonth() + 1) {
            this.today = getLocalTime(date, 'YYYY-MM-DD')
          } else {
            this.today = getLocalTime(date, 'YYYY-MM-DD').substr(0, 8) + '01'
          }
          this.$emit('set-day', { date: this.today })
        }
      })
    },
    setMonthNum(bool) {
      if (bool) {
        if (this.setMonth < 12) {
          this.setMonth = this.setMonth + 1
        } else {
          this.setYear = this.setYear + 1
          this.setMonth = 1
        }
      } else {
        if (this.setMonth > 1) {
          this.setMonth = this.setMonth - 1
        } else {
          this.setYear = this.setYear - 1
          this.setMonth = 12
        }
      }
      this.getMonthDay()
    },
    arrayToString: function(arr) {
      let value = ''
      if (arr != null && arr != '' && arr.length > 0) {
        arr.forEach((column, index) => {
          value = value + ',' + column
        })
        value = value.substring(1)
      }
      return value
    },
    handleCurrent(item, bool) {
      if (bool) {
        this.$emit('worked', item)
      } else {
        this.$emit('work', item)
      }
    },
    handleSetTime(item) {
      console.log(item)
      if (item.day) {
        this.today = item.day
        this.$emit('set-day', { date: item.day })
        this.$emit('get-day', item)
      }
    }
  },
  computed: {},
  filters: {
    day(val) {
      if (val !== '') {
        return val + '日'
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calendar-title {
  height: 45px;
  padding: 0 20px;
  background-color: #c4d7e8;
  border-left: 1.5px solid #fff;
  border-right: 1px solid #fff;
}
.calendar-title a {
  color: #ffffff;
  font-size: 22px;
}
.flexCenter {
  display: flex;
  align-items: center;
}

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

body {
  font-family: Verdana, sans-serif;
}

.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.weekdays {
  margin: 0;
  /*border-top: 1px solid #ffffff;*/
  border-left: 1px solid #ffffff;
}

.weekdays li {
  display: inline-block;
  width: 70px;
  color: #666;
  text-align: center;
  border-right: 2px solid #ffffff;
  height: 50px;
  background: #e7f2f7;
  line-height: 50px;
  border-bottom: 2px solid #ffffff;
}

.days {
  margin: 0;
  /*border-top: 1px solid #ffffff;*/
  border-left: 1px solid #ffffff;
}

.days li {
  list-style-type: none;
  display: inline-block;
  width: 70px;
  text-align: center;
  font-size: 12px;
  color: #777;
  float: left;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  background: #f5f4f4;
  height: 50px;
  padding: 2px 2px 2px 8px;
}

.days li {
  padding: 2px 2px 2px 8px;
}

.no-active {
  background: #f9f9f9;
  color: #349bfe;
  height: 50px;
  position: relative;
}

.no-active .info-bg {
  color: #349bfe;
}

.no-active span {
  color: #315585;
}

.active {
  background: #409efe !important;
  color: #feff02 !important;
  height: 50px;
  position: relative;
}

.active .info-bg {
  color: #feff02 !important;
}

.active span {
  margin-left: 4px;
  color: #ffffff;
}

.lteDay {
  background-color: #f9f9f9;
}

.info-bg {
  cursor: pointer;
  color: red;
  font-size: 16px;
  text-align: right;
}

.num {
  cursor: pointer;
  background-color: red;
  color: #fff;
  min-width: 20px;
  border-radius: 7px;
}

.calendar-month-top {
  color: #315585;
  background-color: #e7f2f7;
  height: 50px;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 1px solid #fff;
}
</style>
